<template>
  <div class="communityBaseInfo">
    <div class="base-info">
      <el-descriptions :column="1">
        <el-descriptions-item
          v-for="(item, index) in baseInfoList"
          :key="index"
          :label="item.label + ':'"
        >
          {{
            info ? (info[item.value] ? info[item.value] + item.unit : '') : ''
          }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="population-size">
      <div class="title">
        <el-icon></el-icon>
        <span>社区人口规模</span>
      </div>
      <div class="content">
        <el-descriptions :column="1">
          <el-descriptions-item
            v-for="(item, index) in populationSizeInfoList"
            :key="index"
            :label="item.label + ':'"
          >
            {{
              info ? (info[item.value] ? info[item.value] + item.unit : '') : ''
            }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <div class="residential-situation">
      <div class="title">
        <el-icon></el-icon>
        <span>七层以及七层以上的住宅情况</span>
      </div>
      <div class="content">
        <el-descriptions :column="1">
          <el-descriptions-item
            v-for="(item, index) in residentialSituationInfoList"
            :key="index"
            :label="item.label + ':'"
          >
            {{
              info ? (info[item.value] ? info[item.value] + item.unit : '') : ''
            }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps({
  info: {
    type: Object,
    default: () => {},
  },
})

interface InfoMap {
  label: string
  value: string
  unit?: string
}

const baseInfoList: InfoMap[] = [
  {
    label: '区县名称',
    value: 'regionName',
    unit: '',
  },
  {
    label: '街道名称',
    value: 'streetName',
    unit: '',
  },
  {
    label: '社区名称',
    value: 'communityName',
    unit: '',
  },
  // {
  //   label: "社区名称（其他）",
  //   value: "other",
  //   unit: ""
  // },
  // {
  //   label: "社区面积",
  //   value: "areaTotal",
  //   unit: "平方米"
  // },
]

const populationSizeInfoList: InfoMap[] = [
  {
    label: '常住人口规模',
    value: 'peopleTotal',
    unit: '人',
  },
  {
    label: '流动人口规模',
    value: 'flowPeopleTotal',
    unit: '人',
  },
  {
    label: '居住户数',
    value: 'households',
    unit: '户',
  },
  {
    label: '常住人口中0-3岁人口规模',
    value: 'partOneTotal',
    unit: '人',
  },
  {
    label: '常住人口中3-6岁人口规模',
    value: 'partTwoTotal',
    unit: '人',
  },
  {
    label: '常住人口中6-18岁人口规模',
    value: 'partThreeTotal',
    unit: '人',
  },
  {
    label: '常住人口中18-60岁人口规模',
    value: 'partFourTotal',
    unit: '人',
  },
  {
    label: '常住人口中60岁以上人口规模',
    value: 'partFiveTotal',
    unit: '人',
  },
]

const residentialSituationInfoList: InfoMap[] = [
  {
    label: '总栋数',
    value: 'buildingTotal',
    unit: '栋',
  },
  {
    label: '总面积',
    value: 'areaTotal',
    unit: '平方米',
  },
  {
    label: '其中安有电梯',
    value: 'elevatorBuilding',
    unit: '栋',
  },
]
</script>

<style scoped lang="scss">
.communityBaseInfo {
  padding: 15px 10px 15px 5px;
  overflow-y: auto;
  height: 100%;

  :deep(.el-descriptions__label) {
    display: inline-block;
    width: 102px;
    color: #717689;
  }

  .base-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 10px;
    span {
      font-size: 14px;
      line-height: 32px;
    }
    :deep(.el-descriptions__cell) {
      border-bottom: 1px dashed #e1e1eb;
      .el-descriptions__content {
        color: #27475f;
      }
    }
  }

  .content {
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    span {
      font-size: 14px;
      line-height: 32px;
    }
  }

  .title {
    margin-top: 5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;

    :deep(.el-icon) {
      width: 3px;
      height: 14px;
      margin-right: 6px;
      background-color: #28b1e4;
      border-radius: 2px;
    }

    span {
      font-size: 14px;
      font-weight: bold;
    }
  }
}
</style>
